<html><head><title>drag item to containers then swap example 1</title>
<style type="text/css">
b { font-style: normal; }
body { background-color: #d2adcd; }
.container
{
	background-color: #f4edf0;
	border: 1px solid #ddd;
	border-bottom: medium solid #ddd;	
	width: 250px;
	height: 100px;
	margin: 5px;
	float: right;
}

.handle
{
	display: block;
	background-color: #f8c4f6;
	border-top: medium solid #fcf;
	border-left: thin solid #fcf;
	border-right: thin solid #fcf;
	border-bottom: thick solid #fcf;
}

.handle span
{
	margin: 5px;
	font-style: oblique;
	color: white;
}

.tall
{
	height: 400px;
}

.broad
{
	width: 400px;
}

.small
{
	width: 100px;
	height: 100px;
}

.medium
{
	width: 200px;
	height: 200px;
}

.large
{
	width: 300px;
	height: 300px;
}

.tiny
{
	width: 50px;
	height: 70px;
	float: none !important;
}

.item
{
	float: left; /** very important **/
	display: block; /** very important **/
	border: medium solid #91c7ed;
	background-color: #8d9ac4;
	width: 60px;
	height: 60px;
	margin: 5px;
}

.item span
{
	margin-left: 4px;
	margin-right: 4px;
	color: white;
}

.description
{
	width: 600px;
	color: #f6b9d4;
	background-color: #a46b84;
	border: thick solid #852550;
	float: none !important;
}

.description p
{
	font-size: medium;
	margin-left: 1em;
}

.description p:first-letter
{
	font-size: 30px;
	font-style: oblique;
	color: #f9e4ed;
	font-variant: small-caps;
	margin: 5px;
}

</style>
<!-- ToolMan components -->
<script type="text/javascript" src="../ToolMan/core.js"></script>
<script type="text/javascript" src="../ToolMan/css.js"></script>
<script type="text/javascript" src="../ToolMan/coordinates.js"></script>
<script type="text/javascript" src="../ToolMan/events.js"></script>
<script type="text/javascript" src="../ToolMan/drag.js"></script>
<script type="text/javascript" src="../ToolMan/cookies.js"></script>

<!-- jsTool components -->
<script type="text/javascript" src="../jsTool/core.js"></script>
<script type="text/javascript" src="../jsTool/intersection.js"></script>
<script type="text/javascript" src="../jsTool/raise.js"></script>
<script type="text/javascript" src="../jsTool/container.js"></script>
<script type="text/javascript" src="../jsTool/swap.js"></script>
<script type="text/javascript" src="../jsTool/test.js"></script>
<!-- load scripts -->
<script type="text/javascript">
window.onload = function ()
{
	var swap = Tool.dragswap();
	var drag = ToolMan.drag();
	var raise = Tool.raise();

	_$ =
	{
		getById : function (id) { return document.getElementById(id); }//,
	};

	var containers = []; /// equiv. to new Array();
	for (var i=1, len=9; i<=len; ++i)
	{
		var element = _$.getById('c' + i);
		var handle = _$.getById('h' + i);
		if (!element) continue;
		var group = drag.createSimpleGroup(element, handle);
		raise.makeRaisable (group);
		containers.push(element);
	}

	for (var i=1, len=12; i<=len; ++i)
	{
		var element = _$.getById('i' + i);
		if (!element) continue;
		swap.makeItemSwappableInline (element, containers);
	}
	
}; /// end of window.onload event
</script></head>
<body>

<div class="description">
  <p>the following element <div class="item"><span>?</span></div>is an item. </p>
  <p>it can be dragged into a container.</p>
  <p>the swap behaviour kicks in, when the maximum number of elements has been reached.</p>
</div>

<div class="description">
  <p>the following element is a container. </p>
  <div class="container tiny"><b class="handle"><span>drag</span></b></div>
  <p>items can be dragged into it.</p>
</div>

<div id="c1" class="container" max="3"><b id="h1" class="handle"><span>drag</span></b></div>
<div id="c5" class="container tall" max="5"><b id="h5" class="handle"><span>drag</span></b></div>
<div id="c6" class="container broad" max="3"><b id="h6" class="handle"><span>drag</span></b></div>
<div id="c7" class="container small" max="1"><b id="h7" class="handle"><span>drag</span></b></div>
<div id="c8" class="container medium" max="3"><b id="h8" class="handle"><span>drag</span></b></div>
<div id="c9" class="container large" max="4"><b id="h9" class="handle"><span>drag</span></b></div>

<div id="i1" class="item"><span>a</span></div>
<div id="i2" class="item"><span>b</span></div>
<div id="i3" class="item"><span>c</span></div>

<div id="i4" class="item"><span>d</span></div>
<div id="i5" class="item"><span>e</span></div>
<div id="i6" class="item"><span>f</span></div>

<div id="i7" class="item"><span>g</span></div>
<div id="i8" class="item"><span>h</span></div>
<div id="i9" class="item"><span>i</span></div>

<div id="i10" class="item"><span>j</span></div>
<div id="i11" class="item"><span>k</span></div>
<div id="i12" class="item"><span>l</span></div>

</body></html>